<script setup lang="ts">

import img from "@/assets/img";
import {AiOutlineLeft,AiOutlineArrowRight} from "vue-icons-plus/ai";
import {UserApi,type OrderRO} from "@/api";

interface FoodItem {
  id: number;
  name: string;
  price: number;
  count: number;
}

interface OrderData {
  items: FoodItem[];
  totalPrice: number;
}

const username = ref('');

onMounted(() => {
  const storedUsername = sessionStorage.getItem('username');
  if (storedUsername) {
    username.value = storedUsername;
  }
});

const api = new UserApi()

const order = ref<OrderRO>({
  user_name:  username.value,
  store_name : '万家饺子(软件园E18店)',
  product_name :[] ,
  quantity :  [],
  price : [],
  totalPrice : 0,
  status : 0,
})

const orderData = ref<OrderData>({
  items: [],
  totalPrice: 0,
});

const restoreOrderData = () => {
  const savedOrderData = sessionStorage.getItem('orderData');
  if (savedOrderData) {
    orderData.value = JSON.parse(savedOrderData);
  }
};

const updateOrderFromOrderData = () => {
  order.value.user_name = username.value;
  order.value.store_name = '万家饺子(软件园E18店)';
  order.value.product_name = orderData.value.items.map(item => item.name);
  order.value.quantity = orderData.value.items.map(item => item.count);
  order.value.price = orderData.value.items.map(item => item.price);
  order.value.totalPrice = orderData.value.totalPrice;
  order.value.status = 0;
};
let orderId = ref('');

const submitOrder = () => {
  updateOrderFromOrderData();
  return api.storeOrders(order.value).then((res) => {
    orderId.value = res.data; // 获取返回的订单ID
    sessionStorage.setItem('order_id', orderId.value);
    console.log('提交订单成功:', res);
  }).catch((error) => {
    console.error('提交订单失败:', error);
    return Promise.reject(error);
  });
};
onMounted(() => {
  restoreOrderData();
});

const router = useRouter();
function goback(){
  router.push({ name: 'businessinformation' });
}
function pay() {
  submitOrder().then(() => {
    router.push({ name: 'pay' });
  }).catch((error) => {
    console.error('提交订单失败:', error);
  });
}

</script>

<template>
    <div class="w-full w-full">
      <header class="w-full h-12vw bg-#0097ff color-#fff text-4.8vw flex items-center pos-fixed left-0 top-0 z-100">
        <AiOutlineLeft @click="goback" class="cursor-pointer"></AiOutlineLeft>
        <p class="color-#fff text-4.8vw select-none flex-grow text-center mr-4">确认订单</p>
      </header>
      <div class="w-full mt-12vw bg-#0097ef box-border color-#fff p-2vw select-none">
        <h5 class="text-3vw font-300">订单配送至：</h5>
        <div class="w-full flex justify-between items-center font-700 cursor-pointer m-1vw">
          <p class="text-4vw w-90%">云南大学呈贡校区</p>
          <AiOutlineArrowRight></AiOutlineArrowRight>
        </div>
        <p class="text-3vw">云先生 12345678910</p>
      </div>
      <h3 class="box-border p-2vw text-3vw color-#666 b-b-solid b-b-1px b-b-#DDD">万家饺子(软件园E18店)</h3>
      <ul class="w-full">
        <li v-for="item in orderData.items" :key="item.id">
          <div class="order-left">
            <img :src="img[`sp${item.id}` as keyof typeof img]" />
            <p>{{ item.name }} x {{ item.count }}</p>
          </div>
          <p>&#165;{{ item.price * item.count }}</p>
        </li>
      </ul>
      <div class="w-full h-16vw box-border p-3vw color-#666 text-3.5vw flex justify-between items-center">
        <p>配送费</p>
        <p>&#165;3</p>
      </div>
      <div class="total w-full h-14vw pos-fixed left-0 bottom-0 flex select-none">
        <div style="flex: 2" class="total-left bg-#505051 color-#fff text-4.5vw font-700 flex justify-center items-center">
          总计：&#165;{{ orderData.totalPrice }}
        </div>
        <div @click="pay" style="flex: 1" class="total-right bg-#30CA73 color-#fff text-4.5vw font-700 cursor-pointer flex justify-center items-center">
          去支付
        </div>
      </div>
    </div>
  </template>

<style scoped>
li{
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  color: #666;

  display: flex;
  justify-content: space-between;
  align-items: center;
}
li .order-left{
  display: flex;
  align-items: center;
}
li .order-left img{
  width: 10vw;
  height: 10vw;
}
li .order-left p{
  font-size: 3vw;
  margin-left: 3vw;

}
li p{
  font-size: 3.5vw;
}

</style>